<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/d3.v5.min.js"></script>


</head>
<style>
    body {
        margin: 0 auto;
        max-width: 750px;
        background: #f8f8f8;
    }
    .content{
        padding: 0px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0px;
        padding-right: 0px;
    }
    .content-wrapper, .right-side{background-color: #f8f8f8;}
    .skin-red-light .content-wrapper, .skin-red-light .main-footer{    border-left: 0px;}
    h3{text-align: center;line-height: 40px;height: 40px;margin-top: 0px;
        margin-bottom: 0px;font-size: 20px; }
    .text{
        position: absolute;
        bottom: 12%;
        right: 7%;
        font-size: 14px;
        color: #333;
    }
    .text p{margin: 0px;text-align: center}
    .ani_cmp1 {
        animation-duration: 2s;
        animation-delay: 2s;
    }
    .ani_cmp2 {
        animation-duration: 2s;
        animation-delay: 4s;
    }
    .ani_cmp3 {
        animation-duration: 2s;
        animation-delay: 6s;
    }
    .ani_cmp4 {
        animation-duration: 2s;
        animation-delay: 8s;
    }
    .ani_cmp5 {
        animation-duration: 2s;
        animation-delay: 10s;
    }
    .ani_cmp6{
        animation-duration: 2s;
        animation-delay: 12s;
    }
    .strong{font-weight: bold;font-size:20px; }
    .strong1{
        font-weight: bold;font-size:24px;
    }
    .zy_app{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%}
    .ani_cmp7{
        animation-duration: 2s;
        animation-delay: 81s;
    }
    .shadow{
        position: absolute;
        top: 0px;left: 0px;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,0.8);
        opacity: .5;
    }
    .zy_app img{
        position: absolute;
        width: 50%;
        left: 25%;
        top: 35%;
    }
    .ani_cmp8{
        animation-duration: 2s;
        animation-delay: 83s;
        position: absolute;
        text-align: center;
        width: 100%;
        top: 25%;
        color: #fff;
    }
    .ani_cmp9{
        animation-duration: 2s;
        animation-delay: 85s;
    }
</style>
<body>
<div class="index_ani">
    <h3 class="ani_cmp1 animated fadeInDown">40年中原地产大陆区客户资产</h3>
    <div class="text">
        <p class="ani_cmp2 animated fadeInRight">40年的<span class="strong">客户沉淀</span></p>
        <p class="ani_cmp3 animated fadeInRight">40年的<span class="strong">客户信任</span></p>
        <p class="ani_cmp4 animated fadeInRight">40年的<span class="strong">客户见证</span></p>
        <p class="ani_cmp5 animated fadeInRight">40年的<span class="strong">客户维系</span></p>
        <p class="ani_cmp6 animated fadeInRight strong1">40年成就你我</p>
    </div>

</div>
<center>
    <svg id='data_growth'></svg>
    <script src="js/config.js"></script>
    <script src="js/visual.js"></script>
    <link rel="stylesheet" href="css/stylesheet.css">
</center>
<script type="text/javascript">
    $(function () {
        // var vConsole = new VConsole();
        var svg = document.getElementById('data_growth')
        svg.setAttribute('height', (document.documentElement.clientHeight - 45))
        svg.setAttribute('width', document.documentElement.clientWidth )
        $.getJSON("data.json",function(data){
            /* console.log(data)*/
            draw(data)
        })


    })




</script>
</body>
</html>